import {ICarousel} from '@/models/home';
import {hp, viewportWidth, wp} from '@/utils/index';
import React from 'react';
import {connect, ConnectedProps} from 'react-redux';
import {StyleSheet, View} from 'react-native';
import {RootState} from '@/models/index';
import SnapCarousel, {
  AdditionalParallaxProps,
  ParallaxImage,
  Pagination,
} from 'react-native-snap-carousel';
const sliderWidth = viewportWidth;
const sideWidth = wp(90);
export const slidHeight = hp(26);
const itemWidth = sideWidth + wp(2) * 2;
const mapStateToProps = (state: RootState) => ({
  home: state.home,
});
const connector = connect(mapStateToProps);
type modelState = ConnectedProps<typeof connector>; //获取redux中数据的模型以供给组件方便调用
interface IProps extends modelState {}

class Carousel extends React.PureComponent<IProps> {
  onSnapToItem = (index: number) => {
    const {dispatch} = this.props;
    dispatch({
      type: 'home/setState',
      payload: {activeCarouselIndex: index},
    });
    // this.setState({
    //   activeSlide: index,
    // });
  };
  componentDidMount() {
    console.log('componentDidMount');
  }
  renderItem = (
    {item}: {item: ICarousel},
    parallaxProps?: AdditionalParallaxProps,
  ) => {
    // return <Image source={{uri: item}} style={styles.image} />;
    return (
      <ParallaxImage
        source={{uri: item.image}}
        style={styles.image}
        containerStyle={styles.imageContainer}
        parallaxFactor={0.8}
        showSpinner
        spinnerColor="rgba(0, 0, 0, 0.25)"
        {...parallaxProps}
      />
    );
  };
  get pagination() {
    const {home} = this.props;
    const {carousels, activeCarouselIndex} = home;
    return (
      <View style={styles.paginationWrapper}>
        <Pagination
          dotsLength={carousels.length} //选择器个数
          activeDotIndex={activeCarouselIndex} //当前选择下标
          containerStyle={styles.paginationContainer} //选择器大方块样式修改
          dotContainerStyle={styles.dotContainer} //每个选择器圆点外包围的box样式修改
          dotStyle={styles.dot} //选择器圆点样式
          inactiveDotScale={0.8} //未选中时选择器圆点缩放比例
          inactiveDotOpacity={0.4} //未选中时选择器圆点透明度
        />
      </View>
    );
  }

  render() {
    const {home} = this.props;
    const {carousels, activeCarouselIndex} = home;
    return (
      <View>
        <SnapCarousel
          data={carousels}
          renderItem={this.renderItem}
          sliderWidth={sliderWidth}
          itemWidth={itemWidth}
          hasParallaxImages
          loop={true}
          autoplay={true}
          onSnapToItem={this.onSnapToItem}
        />
        {/* {this.pagination} */}
        <View style={styles.paginationWrapper}>
          <Pagination
            dotsLength={carousels.length} //选择器个数
            activeDotIndex={activeCarouselIndex} //当前选择下标
            containerStyle={styles.paginationContainer} //选择器大方块样式修改
            dotContainerStyle={styles.dotContainer} //每个选择器圆点外包围的box样式修改
            dotStyle={styles.dot} //选择器圆点样式
            inactiveDotScale={0.8} //未选中时选择器圆点缩放比例
            inactiveDotOpacity={0.4} //未选中时选择器圆点透明度
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  imageContainer: {
    width: itemWidth,
    height: slidHeight,
    borderRadius: 8,
  },
  image: {
    ...StyleSheet.absoluteFillObject,
    width: itemWidth,
    height: slidHeight,
    resizeMode: 'cover',
  },
  paginationWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  paginationContainer: {
    position: 'absolute',
    top: -20,
    paddingHorizontal: 3,
    paddingVertical: 4,
    backgroundColor: 'rgba(0, 0, 0, .35)',
    borderRadius: 8,
  },
  dotContainer: {
    marginHorizontal: 6,
  },
  dot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: 'rgba(255, 255, 255, 0.92)',
  },
});

export default connector(Carousel);
